import React, { Component } from "react";
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { withRouter } from 'react-router';
import  axios  from 'axios';
import Particles from 'react-particles-js';
import { Divider, notification } from 'antd';
// import log from './login-logo.png'
import './index.css'
class Login extends Component {
  state = {
    visible: false,
    userObj: {}
  }
  // 验证密码和账户
  onFinish = (values,success) => {
    // console.log('Received values of form: ', values);
    axios.post('http://localhost:3333/users/login',values).then(res => {
      const {code} = res.data
      console.log(res.data);  
      if (code === '10010') {
        // console.log('用户名和密码不匹配')
        notification.error({
          message: 'Notification Title',
          description:
            "用户名和密码不正确"
        });
      } else if (code === "10101"){
        console.log('已有账户登陆了')
      } else {
        console.log('登录成功')
      }
      
    })
    // localStorage.setItem('isLogin', true)
    // localStorage.setItem('roleType',3)
    // this.props.history.replace('/')
  };
  render() {
    return(
      <div className ="login_box">
          <Particles height={window.innerHeight - 6 + "px" } 
          params={
            {
              "particles": {
                "number": {
                  "value": 80,
                  "density": {
                    "enable": true,
                    "value_area": 800
                  }
                },
                "color": {
                  "value": "#ffffff"
                },
                "shape": {
                  "type": "polygon",
                  "stroke": {
                    "width": 0,
                    "color": "#000000"
                  },
                  "polygon": {
                    "nb_sides": 5
                  },
                  "image": {
                    "src": "img/github.svg",
                    "width": 100,
                    "height": 100
                  }
                },
                "opacity": {
                  "value": 0.5,
                  "random": false,
                  "anim": {
                    "enable": false,
                    "speed": 1,
                    "opacity_min": 0.1,
                    "sync": false
                  }
                },
                "size": {
                  "value": 3,
                  "random": true,
                  "anim": {
                    "enable": false,
                    "speed": 40,
                    "size_min": 0.1,
                    "sync": false
                  }
                },
                "line_linked": {
                  "enable": true,
                  "distance": 150,
                  "color": "#ffffff",
                  "opacity": 0.4,
                  "width": 1
                },
                "move": {
                  "enable": true,
                  "speed": 6,
                  "direction": "none",
                  "random": false,
                  "straight": false,
                  "out_mode": "out",
                  "bounce": false,
                  "attract": {
                    "enable": false,
                    "rotateX": 600,
                    "rotateY": 1200
                  }
                }
              },
              "interactivity": {
                "detect_on": "canvas",
                "events": {
                  "onhover": {
                    "enable": true,
                    "mode": "repulse"
                  },
                  "onclick": {
                    "enable": true,
                    "mode": "push"
                  },
                  "resize": true
                },
                "modes": {
                  "grab": {
                    "distance": 400,
                    "line_linked": {
                      "opacity": 1
                    }
                  },
                  "bubble": {
                    "distance": 400,
                    "size": 40,
                    "duration": 2,
                    "opacity": 8,
                    "speed": 3
                  },
                  "repulse": {
                    "distance": 200,
                    "duration": 0.4
                  },
                  "push": {
                    "particles_nb": 4
                  },
                  "remove": {
                    "particles_nb": 2
                  }
                }
              },
              "retina_detect": false
           
            }
          }/>
        <div className='form_box'>
          {/* <img src={log} alt=""/> */}
          <Divider style = {
            {
              color: 'rgba(0, 0, 0, 0.65)'
            }
          }>使用用户名登录</Divider>
          <Form
              name="normal_login"
              className="login-form"
              initialValues={{ remember: true }}
              onFinish={this.onFinish}
            >
              <Form.Item
                name="username"
                rules={[{ required: true, message: 'Please input your Username!' }]}
              >
                <Input  size="large" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[{ required: true, message: 'Please input your Password!' }]}
              >
                <Input  size="large"
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  type="password"
                  placeholder="Password"
                />
              </Form.Item>
            

              <Form.Item>
                <Button  block size="large" type="primary" htmlType="submit" className="login-form-button">
                  登录
                </Button>
              </Form.Item>
            </Form>
        </div>
      </div>
    )
  }
}
export default withRouter(Login)